<template>
	<view>
		<view class="cu-bar search bg-white">
			<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big11010.jpg"></view>
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
			</view>
		</view>
		<!-- 滚动区域 -->
		<view class="scroll-panel" id="scroll-panel">
			<view class="list-box">
				<view class="left">
					<scroll-view scroll-y="true" :style="{ 'height':height }">
						<view class="item" 
							v-for="(item,index) in categoryData"
							:key="index" 
							:class="{ 'active':index==leftIndex }" 
							@tap="changeCategory(index)"
						>{{item.name}}</view>
			        </scroll-view>
				</view>
				<view class="main">
					<scroll-view  scroll-y="true" :style="{ 'height':height + 'px' }" scroll-with-animation="true">
						<view class="all-tab text-gray flex align-center justify-between" @tap="goList(0,curRightData.name,curRightData.categoryId)">
							<text class="text-bold">全部{{curRightData.name}}</text>
							<text class="cuIcon-right"></text>
						</view>
						<view v-for="(item,index) in curRightData.children" :key="index">
							<view class="all-tab second-level-tile text-gray flex align-center justify-between" @tap="goList(1,curRightData.name,curRightData.categoryId,item.name,item.categoryId)">
								<text class="text-bold">{{item.name}}</text>
								<text class="cuIcon-right"></text>
							</view>
							<view class="three-level-category">
								<view class="item" v-for="(item1,index1) in item.children" :key="index1" @tap="goList(2,curRightData.name,curRightData.categoryId,item.name,item.categoryId,item1.name,item1.categoryId)">{{item1.name}}</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import json from '@/pages/category/category.js';
	export default {
		data() {
			return {
				leftIndex:0,
				height:0,
				categoryData:json.categoryData ,//模拟数据
				curRightData:[],
			};
		},
		onLoad() {
			this.height = uni.getSystemInfoSync().windowHeight - 60;
			this.changeCategory(0);
		},
		methods:{
			goList(type,oneName,oneLevelId,twoName,twoLevelId,threeName,threeLevelId){
				let urls = '/pages/category/categoryDetail?oneName='+oneName;
				if(type == 0){
					urls = urls + '&oneLevelId='+ oneLevelId;
				}else if(type == 1){
					urls = urls + '&twoName=' + twoName +'&twoLevelId='+twoLevelId;
				}else if(type == 2){
					urls = urls + '&twoName=' + twoName +'&threeName='+threeName+'&threeLevelId='+threeLevelId;
				}
				console.log(urls);
				uni.navigateTo({
					url:urls
				});
			},
			changeCategory(index){
				this.leftIndex = index;
				this.curRightData = this.categoryData[index];
			}
		}
	}
</script>

<style lang="scss">
	.search{
		margin-bottom: 1px;
	}
.list-box{
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
	font-size: 28rpx;
	
	.left{
		width: 200rpx;
		background-color: #f6f6f6;
		line-height: 100rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		font-weight: bold;
		.item{
			padding-left: 20rpx;
			position: relative;
			&:not(:first-child) {
				margin-top: 1px;
			
				&::after {
					content: '';
					display: block;
					height: 0;
					border-top: #d6d6d6 solid 1px;
					width: 620upx;
					position: absolute;
					top: -1px;
					right: 0;
					transform:scaleY(0.5);	/* 1px像素 */
				}
			}
			
			&.active,&:active{
				color: #55b5e1;
				background-color: #fff;
			}
		}
	}
	.main{
		padding: 0 20upx 0 40upx;
		background-color: #fff;
		// padding-left: 20rpx;
		width: 0;
		flex-grow: 1;
		box-sizing: border-box;
		.all-tab{
			// padding: 0 20upx;
			height: 102upx;
			line-height: 102upx;
		}
		.three-level-category{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: 10upx 0 20upx 0;
			.item{
				color: #a7b0b5;
				width: 50%;
				padding: 20upx 0;
			}
		}
		.second-level-tile{
			border-bottom: 1px solid #e5e5e5;
		}
	}
}
</style>
